<template>
    <div style="width: 100%; height: 90%">
        <div class="chart2"></div>
    </div>
</template>
  
<script>
import apis from '@/apis/api'
import * as echarts from "echarts";
export default {
    // props: ['list'],
    data() {
        return {
            list: []
        }
    },
    mounted() {
        this.getList()
    },
    computed: {},

    methods: {
        getList() {
            /** 事件类型统计分布 */
            apis.analysisType({}).then(result => {
                let res = result.data;
                this.list = res;
                // this.databox2 = res;
                this.init();
            });
        },
        init() {
            console.log('颜色改过来了');
            var myChart = echarts.init(document.querySelector(".chart2"));

            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    position: function (p) {
                        //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    width: '20%',
                    top: '50%',
                    right: "10%",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "#fff",
                        fontSize: ".2rem"
                    }
                },
                series: [
                    {
                        name: "等级分布",
                        type: "pie",
                        center: ['30%', '50%'],
                        radius: ["50%", "80%"],
                        // color: [
                        //     "#478125",
                        //     "#ae3c19",
                        //     "#293b9d",
                        // ],
                        itemStyle: {
                            normal: {
                                color: function(d) {
                                    //自定义颜色
                                    // console.log(d,999);
                                    var colorList = ['#478125', '#293b9d', '#ae3c19' ];
                                    if(d.name=='三级') {
                                        return colorList[0]
                                    } else if (d.name=='二级') {
                                        return colorList[1]
                                    } else if (d.name=='一级') {
                                        return colorList[2]
                                    } else {
                                        return 'yellow'
                                    }
                                }
                            }
                        },
                        label: { show: false },
                        labelLine: { show: false },
                        data: this.list
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.chart2 {
    width: 100%;
    height: 100%;
}
</style>